<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">活动详细信息</div>

    <div class="app-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">活动主题</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ detailObj.title }}</div>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">举办单位</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ detailObj.deptName}}</div>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">活动时间</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{detailObj.createTime}}</div>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">报名人数</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ detailObj.userName}}</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">电话</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{detailObj.mobile}}</div>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">上报内容</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ detailObj.content }}</div>
          </el-col>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
export default {
  name: 'activityDetail',
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      id: this.$route.params.id,
      detailObj: {}
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    getUserList () {
      let url = this.$base.getUrl('frontBizactivityinfoDetail')
      this.$store.dispatch('postForm', {
        isJson: true,
        url: url,
        data: {
          id: this.id
        }
      }).then((res) => {
        let { result } = res
        this.detailObj = result
      })
    }
  }
}
</script>

<style scoped>
.detail-wrap {
  padding: 10px;
  margin-top: 20px;
  margin-left: 20px;
  background-color: #fff;
  border: 2px solid #e9e9e9;
}
.txt-color {
  color: #9facc3;
}
</style>
